import React from 'react';
import BaseComponent from "../base/BaseComponent";


import OutSlaughterAddDetailStyle from "../assets/css/OutSlaughterAddDetail.module.css";
// eslint-disable-next-line no-unused-vars
import {Button, List, InputItem, TextareaItem, ImagePicker, Toast,Picker} from "antd-mobile";
import {UploadImage, GetOutSlaughterAddDetail, SaveLeaveEnterInfo,GetEnterVarietyList} from "../http/Request";


let filesData = [];
let filesObj = {};



export default class OutSlaughterAddDetail extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            files: filesData,
            leaveImageUrl: '',
            remarks: '',
            time: new Date().getTime(),
            leaveType: '1010',
            info: {},
            sValue:'',
            TypeList:[],
            seeImg:'',
            imageShow:false,
            leaveAge:'',
            leaveWeight:'',
            leavePrice:'',
            leaveSourceAddress:'',

        }
    }

    //获取年龄
    onChangeAge = (value) => {
        this.setState({
            leaveAge: value,
        });

    }
    //获取体重
    onChangeWeight = (value) => {
        this.setState({
            leaveWeight: value,
        });
    }
    //获取价格
    onChangeLeavePrice = (value) => {
        this.setState({
            leavePrice: value,
        });
    };
    //获取种类
    GetLivestockType () {
        let body = {
            varietyType:'9001'
        };
        GetEnterVarietyList(body).then(resolve => {
            let Resolvearr = resolve.body
            let DataArr = []
            Resolvearr.forEach(element => {
                // console.log(element)
                let CurrentObj = {};
                CurrentObj['value'] = element.varietyId;
                CurrentObj['label'] = element.varietyName;
                DataArr.push(CurrentObj)
            });
          
            this.setState({
                TypeList:DataArr
            })
        }).catch(err => {

        })
    }
    // 获取来源地
    onChangeOriginPlace = (value) => {
        this.setState({
            leaveSourceAddress: value
        })
    }
    //获取我的备注
    onChangeRemarks = (value) => {
        this.setState({
            remarks: value
        })
    }
    //上传图片
    onChange = (files, type, index) => {
        let formData = new FormData();
        formData.append('file', files[0]['file']);
        UploadImage(formData).then(resolve => {
            filesObj['url'] = resolve.body;
            this.state.files.push(filesObj);
            this.setState({
                files: this.state.files,
                leaveImageUrl: resolve.body
            });
            console.log(this.state.leaveImageUrl, this.state.files);
        }).catch(err => {

        });
    };
    //获取信息
    getOutSlaughterAddDetail = () => {
        let param = {
            id: this.props.match.params['infoId']
        };
        GetOutSlaughterAddDetail(param).then(res => {
            console.log(res);
            this.setState({
                info: res.body,
            })
        }).catch(err => {

        })
    };

    back(){
        window.history.back(-1)
    }


    //提交完成
    submitData() {
        if(this.state.leaveAge.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === '') {
            Toast.offline('请输入出栏年龄', 1);
            return;
        }
        if(this.state.leaveWeight.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === ''){
            Toast.offline('请输入出栏体重', 1);
            return;
        }
        if(this.state.leavePrice.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === ''){
            Toast.offline('请输入出栏价格', 1);
            return;
        }
        let VarketyName = document.getElementsByClassName('am-list-extra')[0].innerText;
        if(VarketyName === '请选择'){
            Toast.offline('请选择种类', 1);
            return;
        }
        if(this.state.leaveSourceAddress.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === ''){
            Toast.offline('请输入来源地', 1);
            return;
        }
        let body = {};
        body['infoId'] = parseInt(this.props.match.params['infoId'])
        body['enterVarietyId'] = this.state.sValue[0]+'';
        body['leaveTime'] = parseInt(this.state.time);
        body['enterVarietyName'] = document.getElementsByClassName('am-list-extra')[0].innerText;
        body['leaveType'] = this.state.leaveType;
        body['leaveAge'] = this.state.leaveAge;
        body['leaveWeight'] = this.state.leaveWeight;
        body['leavePrice'] = this.state.leavePrice;
        body['leaveSourceAddress'] = this.state.leaveSourceAddress;
        body['leaveImages'] = this.state.leaveImageUrl;
        SaveLeaveEnterInfo([body]).then(resolve => {
            console.log(resolve);
            setTimeout(this.back,1500)
            Toast.info('添加完成');
        }).catch(err => {

        })
    }

    showBanner = () =>{
        let that = this;
        that.setState({
            imageShow:!that.state.imageShow
        })
    }

    //查看入栏照片
    ImageView =() => {
            return (
                <div className={OutSlaughterAddDetailStyle.modalBox} onClick={this.showBanner.bind(this)}>
                    <img className={OutSlaughterAddDetailStyle.modalImage} src={this.state.seeImg} alt=""/>
                </div>

            );
    }

    //数据渲染完成-生命周期
    componentDidMount() {
        this.getOutSlaughterAddDetail()
        this.GetLivestockType()
    }

    render() {
        const {files} = this.state;
        return (
                <div className={'main'}>
                    {this.state.imageShow ? this.ImageView() : ''}
                    <div className={OutSlaughterAddDetailStyle.topPart}/>
                    <div className={OutSlaughterAddDetailStyle.buttonBox}>
                        <Button onClick={this.showBanner.bind(this)} style={{marginRight: '15px'}}  type="ghost" inline size="small">查看入栏照片</Button>
                        <Button onClick={this.submitData.bind(this)} type="ghost" inline size="small">完成</Button>
                    </div>
                    <div style={{margin: '15px', fontSize: '16px'}}>
                        编号：{this.state.info['infoId']}
                    </div>
                    <div className={OutSlaughterAddDetailStyle.InfoBoard}>
                        <div className={OutSlaughterAddDetailStyle.rowList}>
                            <div className={OutSlaughterAddDetailStyle.row}>
                                <div>
                                    <label>入栏时间:</label><span>{this.state.info['enterTime']}</span>
                                </div>
                                <div>
                                    <label>状态:</label><span>{this.state.info['leaveType'] === 1001 ? '入栏' : '出栏'}</span>
                                </div>
                            </div>
                            <div className={OutSlaughterAddDetailStyle.row}>
                                <div>
                                    <label>入栏年龄:</label><span>{this.state.info['enterAge']}个月</span>
                                </div>
                                <div>
                                    <label>种类:</label><span>{this.state.info['enterVarietyName']}</span>
                                </div>
                            </div>
                            <div className={OutSlaughterAddDetailStyle.row}>
                                <div>
                                    <label>入栏价格:</label><span>¥{this.state.info['enterPrice']}</span>
                                </div>
                                <div>
                                    <label>来源地:</label><span>{this.state.info['enterSourceAddress']}</span>
                                </div>
                            </div>
                            <div className={OutSlaughterAddDetailStyle.row}>
                                <div>
                                    <label>入栏体重:</label><span>{this.state.info['enterWeight']}kg</span>
                                </div>
                                <div>
                                    <label>备注:</label><span>{this.state.info['remarks']}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={OutSlaughterAddDetailStyle.formBox}>
                        <List className={OutSlaughterAddDetailStyle.formList}>
                            <InputItem type={"number"} onChange={this.onChangeAge}
                                       value={this.state.leaveAge}>出栏年龄</InputItem>
                            <InputItem type={"number"} onChange={this.onChangeWeight}
                                       value={this.state.leaveWeight}>出栏体重</InputItem>
                            <InputItem type={"number"} onChange={this.onChangeLeavePrice}
                                       value={this.state.leavePrice}>出栏价格</InputItem>
                              <Picker data={this.state.TypeList} cols={1}
                                        value={this.state.sValue}
                                        onChange={v => this.setState({ sValue: v })}
                                        onOk={v => this.setState({ sValue: v })}
                                >
                                    <List.Item arrow="horizontal">种类</List.Item>
                                </Picker>
                            <InputItem type={"text"} onChange={this.onChangeOriginPlace}
                                       value={this.state.leaveSourceAddress}>来源地</InputItem>
                            <TextareaItem defaultValue={'填写备注'}
                                          style={{height: '100px', border: '1px solid #fefefe', padding: '5px'}}
                                          title="备注" onChange={this.onChangeRemarks} value={this.state.remarks}/>
                            <ImagePicker length="1" disableDelete={true} selectable={files.length < 1} files={files}
                                         onChange={this.onChange} onAddImageClick={this.onAddImageClick}/>
                        </List>
                    </div>
                </div>
        )
    }
}
